<template>
	<view class="book">
		<uni-nav-bar fixed background-color="transparent" color="#fff" :title="'苏格拉底问答'" @clickLeft="clickNavLeft()">
			<!-- 导航栏左侧插槽 -->
			<view slot="left">
				<u-icon name="arrow-left" size="40"></u-icon>
			</view>
		</uni-nav-bar>

		<view class="title">
			<view class="txt">
				课程目录
			</view>
		</view>
		<u-collapse class="sfq" @change="open">
			<u-collapse-item :title="item.name" v-for="(item,index) in mlList" :key="index" class="item"
				:name="item.name">
				<view class="content" v-for="(items,indexs) in courseList" :key="indexs" @click="contClick(items)">
					<view class="line">
						<image
							:src="contId === items.id ? '../../static/images/book-blue.png' : '../../static/images/book.png'"
							mode="widthFix" class="book-img"></image>
						<text>{{items.title}}</text>
					</view>
					<u-icon name="arrow-right" v-if="contId !== items.id" color="#fff" size="28"></u-icon>
					<image v-else src="../../static/images/bk.png" mode="widthFix" class="bk-img"></image>
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script>
	import {
		sort_ascii,
		getMD5Screct
	} from "../../static/js/utils"
	export default {
		data() {
			return {
				mlList: [],
				courseList: [{}],
				contId: null
			};
		},
		onLoad(option) {
			this.getBookList();
		},
		methods: {
			// 返回上一级
			clickNavLeft() {
				uni.navigateBack({
					delta: 1
				});
			},
			getBookList() {
				let data = {
					appKey: this.appkey,
					appSecret: this.appSecret,
					uid: this.uid.toString(),
				}
				let sign = sort_ascii(data);
				sign = getMD5Screct(sign);
				data.signature = sign;
				uni.request({
					method: "POST",
					url: `${this.baseUrl}/api/course/typelist`,
					data: data,
					success: (res) => {
						const {
							data
						} = res.data;
						console.log(data);
						this.mlList = data.data
					},
					fail: (err) => {
						console.log('请求失败_______________', err)
					}
				})
			},
			open(e) {
				uni.showLoading({
					title:'加载中...'
				})
				this.$u.debounce(() => {
					this.contId = null;
					this.courseList = [{}]
					const idx = this.mlList.findIndex(v => v.name === e)
					let datas = {
						appKey: this.appkey,
						appSecret: this.appSecret,
						uid: this.uid.toString(),
						typeid: this.mlList[idx].id
					}
					let sign = sort_ascii(datas);
					sign = getMD5Screct(sign);
					datas.signature = sign;
					uni.request({
						method: "POST",
						url: `${this.baseUrl}/api/course/index`,
						data: datas,
						success: (res) => {
							const {
								data
							} = res.data;
							this.courseList = data.data
							uni.hideLoading()
							console.log(this.courseList);
						},
						fail: (err) => {
							uni.hideLoading()
							console.log('请求失败_______________', err)
						}
					})
				},200)
				
			},
			contClick(item) {
					
				console.log(item)
				this.contId = item.id;
				uni.redirectTo({
					url: "/pages/index/answer?title=" + item.title
				})
			}
		}
	}
</script>

<style lang="scss">
	.book {
		height: 100vh;
		background-image: url("../../static/images/answerbg.png");
		background-size: 100% 100%;
		position: relative;
		overflow-y: auto;

		.title {
			padding: 0 40rpx;

			.txt {
				border-bottom: 1px solid #BAFDFF;
				color: #fff;
				font-size: 40rpx;
				padding: 10rpx;
			}
		}

		.sfq {
			padding: 0 40rpx;

			.item {
				background: #9CDFFF;
				padding: 10rpx 20rpx;
				border-radius: 20rpx;
				margin: 30rpx 0;

				.u-collapse-head {
					color: #fff !important;
				}
			}

			.content {
				display: flex;
				align-items: center;
				padding: 10rpx 0;
				color: #fff;
				justify-content: space-between;
				border-bottom: 1px solid #BAFDFF;

				.line {
					display: flex;
					align-items: center;
				}

				.book-img {
					width: 80rpx;
					margin-right: 20rpx;
				}

				.bk-img {
					width: 15rpx;
				}


			}
		}

		::v-deep .u-collapse-head,
		::v-deep .u-icon__icon {
			color: #fff !important;
		}

	}

	.scroll {
		height: calc(100vh - 152rpx - 56rpx - 50rpx);
	}
	.item view:nth-child(2){
		overflow-y: auto!important
	}
	
</style>
